<!--
 * @Description: 
 * @Author: 47
 * @Date: 2022-12-24 16:42:50
 * @LastEditors: chaixinyu
 * @LastEditTime: 2022-12-30 17:47:34
-->
<template>
    <div class="study-record">
        <!-- 导航栏 -->
        <van-nav-bar
        class="nav-bar"
        title="学习记录"
        left-arrow
        @click-left="onClickLeft"
        />
        <!-- 个人信息 -->
        <div class="my-info">
            <van-row>
                <van-col span="4" offset="1"><img src="/images/headphoto.jpg" alt=""></van-col>
                <van-col span="12" >高思琴</van-col>
            </van-row>
        </div>

        <div class="all-cell">
            <!-- 签到 -->
            <van-cell-group inset>
                <!-- <span class="iconfont icon-qiandao"></span> -->
                <van-cell title="签到" is-link  value="0/0" >
                    <template #icon>
                        <span class="iconfont icon-qiandao1" />
                    </template>
                </van-cell>
            </van-cell-group>

            <!-- 章节学习详情 -->
            <van-cell-group inset>
                <van-cell title="章节任务点"  value="59/59" >
                    <template #icon>
                        <span class="iconfont icon-qizi" />
                    </template>
                    <template #label>
                        <span class="task-rank">进度排名：1/60</span>
                    </template>
                </van-cell>
                <van-cell title="章节测验"  value="20/61">
                    <template #icon>
                        <span class="iconfont icon-wj-bjb" />
                    </template>
                </van-cell>
                <van-cell title="阅读"  value="5分钟" >
                    <template #icon>
                        <span class="iconfont icon-shu" />
                    </template>
                </van-cell>
                <van-cell title="章节学习次数"  value="79" >
                    <template #icon>
                        <span class="iconfont icon-tongji" />
                    </template>
                </van-cell>
            </van-cell-group>

            <!-- 作业/考试 -->
            <van-cell-group inset>
                <van-cell title="作业" is-link  value="0/0">
                    <template #icon>
                        <span class="iconfont icon-zuoye" />
                    </template>
                </van-cell>
                <van-cell title="考试" is-link  value="0/1">
                    <template #icon>
                        <span class="iconfont icon-kaoshi" />
                    </template>
                </van-cell>
            </van-cell-group>

            <!-- 讨论 -->
            <van-cell-group inset>
                <div class="chat">
                    <van-cell title="讨论" >
                        <template #icon>
                            <span class="iconfont icon-chat" />
                        </template>
                    </van-cell>
                    <div class="chat-num">
                        <span>0<br>发表数</span>
                        <span>0<br>回复数</span>
                        <span>0<br>获赞数</span>
                    </div>
                </div>


                <van-cell title="课程积分"  value="0.0分">
                    <template #icon>
                        <span class="iconfont icon-31jifen" />
                    </template>
                </van-cell>
            </van-cell-group>
            
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Cell, CellGroup } from 'vant';
const onClickLeft = () => history.back();
</script>

<style scoped lang="less">
html{
  background-color: #f6f6f6;
}
.study-record{

    height: fit-content;
    padding-bottom: 1px;
    background-color: #f6f6f6;

    .van-nav-bar {
        width: 100%;
        position: fixed;
        
        .van-icon {
        color: black;
        }
        .van-nav-bar__text{
        // font-family: "Calibri";
        font-size: 13px;
        font-weight: 500;
        color: rgb(79, 185, 253) ;
        }
    }

    .my-info{
        padding-top: 47px;
        font-size: 15px;

        .van-row{
            background-color: white;
            height: 60px;
            padding-top: 12px;
            line-height: 50px;

            img{
                margin-top: 5px;
                width: 40px;
                border-radius: 5px;
            }
        }

    }

    .all-cell{
        margin-top: 10px;
        .van-cell-group{
            width: 95%;
            margin: 10px;
            border-radius: 2px;

            .van-cell{
                padding: 17px;
                /deep/ .van-cell__value{
                    font-weight: 600;
                }
                .iconfont{
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    border-radius: 13px;
                    margin-right: 13px;
                    margin-top: 2px;
                    font-size: 12px;
                    font-weight: 700;

                }
                .icon-qiandao1{
                    color: #61d4c6;
                    background-color: #e4fbf5;
                }
                .task-rank{
                    text-align: right;
                }
                .icon-qizi,
                .icon-wj-bjb,
                .icon-shu,
                .icon-tongji{
                    color: #8fafea;
                    background-color: #d5f3fc;
                }

                .icon-kaoshi,
                .icon-zuoye
                {
                    color: #eabf64;
                    background-color:#fdf7dd;
                }
                .icon-chat,
                .icon-31jifen{
                    color: #e5a48a;
                    background-color:#fbf1e4;
                }

            }

            .chat{
                display: flex;
                flex-flow: column wrap;
                // justify-content: ;
                .chat-num{
                    display: flex;
                    flex-flow: row wrap;   
                    justify-content: space-around; 
                    text-align: center;
                    font-size: 13px;
                    font-weight: 600;
                    color: #969799;
                }
            }
        }
    }
}
</style>
